<template>
    <div class="encryption">
        <a-card title="CryptoJS JSON加密解密">
            <a-row :gutter="[12, 12]">
                <a-col :span="10">
                    <h3 class="white_space">
                        获取时间戳（1970年1月1日00:00:00 UTC）毫秒
                    </h3>
                    <div class="flex_display">
                        <a-input disabled ref="timpInput" placeholder="生成的时间戳" v-model:value="formState.timp"></a-input>&nbsp;
                        <a-button @click="handelTimesTamp">生产时间戳</a-button>&nbsp;
                        <a-button type="primary" @click="handelCopy">
                            复制
                        </a-button>&nbsp;
                        <a-button type="primary" @click="handelCopyAssignment">
                            赋值
                        </a-button>
                    </div>
                </a-col>
                <a-col span="4"></a-col>
                <a-col :span="10">
                    <h3 class="white_space">加密解密KEY值</h3>
                    <a-input type="text" placeholder="KEY值" v-model:value="formState.codeKey" />
                </a-col>
            </a-row>
            <a-divider />
            <a-row :gutter="[12, 12]">
                <a-col :span="10">
                    <a-textarea :auto-size="{ minRows: 8, maxRows: 12 }" type="text" v-model:value="formState.encry" placeholder="加密数据" />
                </a-col>
                <a-col :span="4" style="
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    ">
                    <div class="btn_all">
                        <div>
                            <a-button @click="handelAddmi" type="primary">
                                <template #icon>
                                    <RightOutlined />
                                </template>
                                加密</a-button>
                        </div>
                        <div class="btn_center">
                            <a-button @click="handelSubmit" type="primary"><template #icon>
                                    <LeftOutlined />
                                </template>
                                解密</a-button>
                        </div>
                        <div>
                            <a-button @click="handelReset" type="primary">重置</a-button>
                        </div>
                    </div>
                </a-col>
                <a-col :span="10">
                    <a-textarea :auto-size="{ minRows: 8, maxRows: 12 }" type="text" v-model:value="formState.decrypt" placeholder="解密数据" />
                </a-col>
            </a-row>
            <a-divider />
            <a-row :gutter="[12, 12]">
                <a-col :span="20">
                    <a-input type="text" v-model:value="formState.domain" />
                </a-col>
                <a-col :span="4">
                    <div class="btn_all">
                        <a-button type="primary" @click="handeCount">拼接加密</a-button>
                    </div>
                </a-col>
                <a-col :span="20">
                    <div class="flex_display">
                        <a-textarea :auto-size placeholder="拼接加密后路径" v-model:value="formState.path" />
                    </div>
                </a-col>
                <a-col :span="4">
                    <div class="btn_all">
                        <a-button type="primary" @click="handelCopy2">
                            复制
                        </a-button>
                    </div>
                </a-col>
            </a-row>
        </a-card>
    </div>
</template>

<script>
import CryptoJS from "crypto-js";
import { message } from "ant-design-vue";
import { LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
import { ref, onMounted, defineComponent, reactive, toRaw } from "vue";
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
export default defineComponent({
    components: { LeftOutlined, RightOutlined },
    setup () {
        const formState = reactive({
            encry: "",
            decrypt: "",
            timp: "",
            codeKey: "PCITCMOS",
            domain: "http://localhost:9528/#/devops?encryptJson=",
            path: "",
        });
        const handelAddmi = () => {
            if (formState.encry) {
                formState.decrypt = encryptCode(formState.encry);
            } else {
                warning("请输入需要加密的数据");
            }
        };
        const handelSubmit = () => {
            if (formState.decrypt) {
                formState.encry = DecryptCode(formState.decrypt);
            } else {
                warning("请输入需要解密数据");
            }
        };
        const handelReset = () => {
            formState.encry = "";
            formState.decrypt = "";
        };
        const handelTimesTamp = () => {
            let timestamp = Date.now();
            formState.timp = timestamp;
        };
        const handeCount = () => {
            if (formState.decrypt) {
                formState.path = formState.domain + formState.decrypt;
            } else {
                warning("请输入需要解密数据");
            }
        };
        // 加密
        const encryptCode = (value) => {
            let keyHex = CryptoJS.enc.Utf8.parse(formState.codeKey);
            let iv = CryptoJS.enc.Utf8.parse(formState.codeKey);
            let encrypted = CryptoJS.DES.encrypt(value, keyHex, {
                iv: iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7,
            });
            return encrypted.ciphertext.toString();
        };
        // 解密
        const DecryptCode = (value) => {
            let keyHex = CryptoJS.enc.Utf8.parse(formState.codeKey);
            let iv = CryptoJS.enc.Utf8.parse(formState.codeKey);
            let encryptedHexStr = CryptoJS.enc.Hex.parse(value);
            let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
            let decrypt = CryptoJS.DES.decrypt(srcs, keyHex, {
                iv: iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7,
            });
            let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
            return decryptedStr.toString();
        };
        const warning = (msg) => {
            message.warning(msg);
        };
        const success = (msg) => {
            message.success(msg);
        };
        const handelCopyAssignment = () => {
            if (formState.timp) {
                let res = JSON.parse(formState.encry)
                res.timestamp = formState.timp
                formState.encry = JSON.stringify(res)
            } else {
                warning("请先生产时间戳");
            }

        };
        const handelCopy = async () => {
            try {
                let timpVal = ref(String(formState.timp));
                await toClipboard(timpVal.value);
                success("复制成功");
            } catch (e) {
                let message = formState.timp ? "" : "—时间戳不能为空";
                warning("复制失败" + message);
            }
        };
        const handelCopy2 = async () => {
            try {
                let timpVal = ref(String(formState.path));
                await toClipboard(timpVal.value);
                success("复制成功");
            } catch (e) {
                let message = formState.path ? "" : "—路径不能为空";
                warning("复制失败" + message);
            }
        };
        onMounted(() => {
            let obj = {
                customerId: "10010378",
                userAccount: "huangxy32490",
                username: "黄新元",
                phone: "18363852860",
                telephone: "18363852860",
                systemId: "CS23120001",
                email: "xinyuan.huang@pcitc.com",
                sex: null,
                orgName: "应用运营事业部",
                timestamp: "1719212544407",
            };
            formState.encry = JSON.stringify(obj);
        });
        return {
            formState,
            handelSubmit,
            handelAddmi,
            handelReset,
            handelTimesTamp,
            handelCopy,
            handelCopy2,
            handeCount,
            handelCopyAssignment,
            success,
            warning,
        };
    },
});
</script>
<style>
.flex_display {
    display: flex;
    align-items: center;
}
.flex_display .ant-input[disabled] {
    background: rgba(255, 255, 255);
    color: #000;
}
.btn_all .ant-btn {
    width: 120px;
}
.btn_center {
    margin: 10px 0px 10px 0px;
}
.white_space {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
